<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button  size="mini" type="info" class="editBtn" @click="isediting = !isediting">{{ isediting?'取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item v-for="(channel, idx) in channels"
        :key="channel.id"
        @click="hClickMyChannel(idx)"
        :class="{cur:idx === curIndex}"
        >
          <span>频道{{channel.name}}</span>
          <van-icon name="cross" class="btn" v-show="isediting && idx !==0" ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <!-- 推荐事件注册事件完成功能 -->
      <van-grid>
        <van-grid-item v-for="channel in recommandChannels"
        :key="channel.id"
        @click="hClickRecommandChannel(channel)"
        >
          <span>{{channel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// 引入获取所有频道id接口
import { getAllChannels, addChannel, delChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props: {
    channels: {
      type: Array,
      required: true
    },
    curIndex: {
      type: Number,
      require: true
    }

  },
  data () {
    return {
      isediting: false, // 是否处于编剧状态
      allChannels: []
    }
  },
  created () {
    this.isgetAllChannels()
  },
  computed: {
    recommandChannels () {
      // 对所有频道进行循环
      //  如果早channel中出现的则不是可选频道 没出现就是不可选频道
    //   const res = this.allChannels.filter(channel => {
    //     const idx = this.channels.findIndex(item => item.id === channel.id)
    //     if(idx !== -1){
    //         return false // 不保留
    //     }else{
    //         return true // 保留
    //     }
    //   })
      return this.allChannels.filter(channel => this.channels.findIndex(item => item.id === channel.id) === -1)
    }
  },
  methods: {
    async isgetAllChannels () {
      const result = await getAllChannels()
      console.log('所有频道', result)
      this.allChannels = result.data.data.channels
    },
    // 用户点击了我的频道要做频道跳转
    async hClickMyChannel (idx) {
      if (this.isediting) {
        if (idx === 0) {
          return
        }
        // 频道删除
        const result = await delChannel(this.channels[idx].id)
        console.log('要删除的频道结果', result)
        // 更新视图
        this.channels.splice(idx, 1)
        // 修复显示错误的bug
        if (idx < this.curIndex) {
          this.$emit('updateCurrentIndex', this.curIndex - 1)
        }
        this.$toast.success('删除频道成功了')
      } else {
        // 告诉父组件被点击得频道
        this.$emit('updateCurChannel', idx)
      }
    },
    // 推荐频道添加 用户在可选频道进行一次点击 会触发下面事件
    async hClickRecommandChannel (channel) {
      //  组装接口需要的参数 接口频道不能在其中
      // 获取点击频道的id
      const curSelectChannelId = channel.id
      // 添加已选的频道列表
      const channels = this.channels.map(channel => {
        return { id: channel.id }
      })
      channels.push({ id: curSelectChannelId })
      // 调整属性名
      channels.forEach((item, idx) => {
        item.seq = idx
      })
      console.log(channels)
      // 推荐频道不能在里面 删除第一项  推荐频道
      channels.splice(0, 1)
      // 发请求
      const result = await addChannel(channels)
      console.log(result)
      // 更新视图 把用户点击的频道从可选频道中删除 添加到已经选择的频道中
      // 我的频道会多出一个
      //  可选频道会少一个
      // 父组件中频道列表会被修改(props中传递的是一个数组)
      this.channels.push(channel)
      this.$toast.success('添加频道列表')
    }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
.cur {
    color:red;
    font-weight:bold;
}

</style>
